<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="${pageContext.request.contextPath}/image/logo.png" rel="Shortcut Icon">
    <style>

    </style>
</head>

<body>
<div id="main" style="width: 650px;height: 250px;background-color: #ffffff; position: absolute;"></div><input style="display:none" type="text" id="fId" value="${requestScope.fId}"/>
<font size="" color="black">2021年6月22日</font>
</body>

</html>
<script src="${pageContext.request.contextPath}/Resource/echarts/echarts.min.js"></script>
<script src="Resource/jquery-3.3.1.js"></script>
<script>

    var myArray;
    var myArrayLike;
    $.ajax({
        url : "/Anonymous/selectFundValueChangeData.do",//请求地址
        dataType : "json",//数据格式
        type : "post",//请求方式
        async : false,//是否异步请求
        data:{ //传入数据到后台
            fid:"007685"
        },
        success : function(data) {   //成功返回数据
            myArray=data;
        }
    });
    $.ajax({
        url : "/Anonymous/selectFundValueChangeData.do",//请求地址
        dataType : "json",//数据格式
        type : "post",//请求方式
        async : false,//是否异步请求
        data:{ //传入数据到后台
            fid:"000127"
        },
        success : function(data) {   //成功返回数据
            myArrayLike=data;
        }
    });

    var fvcdate = new Array();
    var fvcdwjz = new Array();
    var fvcchange = new Array();
    for(var i=0;i<myArray.length;i++){    //遍历data数组

        var date = new Date(myArray[i].fvcdate);
        fvcdate[fvcdate.length] = date.toLocaleDateString(); //设置日期格式

        fvcdwjz[fvcdwjz.length] = myArray[i].fvcdwjz;
        //console.log("基金编号："+myArray[i].fid);
        fvcchange[fvcchange.length] = myArray[i].fvcchange; //每日净值变化
    }

    var fvcdwjzLike = new Array();
    for(var i=0;i<myArray.length;i++){    //遍历data数组
        if (i < myArray.length - myArrayLike.length){
            fvcdwjzLike[fvcdwjzLike.length] = 0;
        }else{
            fvcdwjzLike[fvcdwjzLike.length] = myArrayLike[i - (myArray.length - myArrayLike.length)].fvcdwjz;
        }
    }






    var myChart;
    var option;
    function loadLine() {
        option = {
            tooltip: {
                formatter: '{b0}<br/>{a0}: {c0}%<br />{a1}: {c1}(单位/元)<br />{a2}: {c2}(单位/元)<br />',
                trigger: 'axis',
            },
            //工具框，可以选择
            toolbox: {
                feature: {
                    saveAsImage: {} //下载工具
                }
            },

            color:['#4C77AA','#AA604C','#B5B5B5','#587048'],
            legend: {
                data: ['单位净值','净值回报','同类单位净值'],
                x: 'right', // 'center' | 'left' | {number},
                y: 'bottom', // 'center' | 'bottom' | {number}
                padding: [0, 150, 15, 0],
                itemWidth:18,//图例的宽度
                itemHeight:3,//图例的高度
                icon: 'rectangle'
            },
            xAxis: {
                type: 'category',
                data: fvcdate,
                boundaryGap: false
            },
            yAxis: {
                type: 'value',
                name: "所有",
                min: -10,
                max: 10,
                splitNumber: 1, // 设置y轴刻度间隔个数
                interval:2.5, //每次增加几个
                minInterval: 1,



                // 坐标轴颜色
                axisLine: {
                    lineStyle: {
                        color: '#2d303b'
                    }
                },// 坐标轴颜色
                splitLine: {
                    lineStyle: {
                        color: ['#cccccc']
                    }
                },// 分割线颜色
                axisLabel: {
                    show: true,
                    interval: 'auto',
                    formatter: '{value}%',
                    color: '#000000'
                }// 坐标轴的文字颜色
                // axisPointer: {
                //     show: true
                // }
            },
            series: [
                {
                    symbol: 'star',
                    symbolSize:0,
                    name: '净值回报',
                    type: 'line',
                    data: fvcchange,
                    symbol: 'circle',
                    label: {},
                    //线条大小
                    lineStyle: {
                        color: '#4C77AA',
                        width: 1
                    },
                    emphasis:{ //取消hover线条加粗
                        lineStyle: {
                            width: 1
                        }
                    }
                },
                {
                    symbol: 'star',
                    symbolSize:0,
                    name: '单位净值',
                    type: 'line',
                    data: fvcdwjz,
                    symbol: 'circle',
                    label: {},
                    //线条大小
                    lineStyle: {
                        color: '#AA604C',
                        width: 1
                    },
                    emphasis:{
                        lineStyle: {
                            width: 1
                        }
                    }
                },
                {
                    symbol: 'star',
                    symbolSize:0,
                    name: '同类单位净值',
                    type: 'line',
                    data: fvcdwjzLike,
                    symbol: 'circle',
                    label: {},
                    connectNulls: true,
                    //线条大小
                    lineStyle: {
                        color: '#B5B5B5',
                        width: 1
                    },
                    emphasis:{
                        lineStyle: {
                            width: 1
                        }
                    }
                }
            ],
            dataZoom: [
                {
                    //slider表示有滑动块的，inside表示内置的
                    type: 'inside',
                    show: true,
                    xAxisIndex: [0],
                    start: 0,
                    end: 50,
                    showDetail: true// 拖拽时，是否显示详细信息
                }
            ]
        };
        myChart = echarts.init(document.getElementById('main'));
        myChart.setOption(option)
    }

    $(function () {
        loadLine();

        $("#btn_click").click(function () {
            option.dataZoom[0].start = option.dataZoom[0].start + 10;
            option.dataZoom[0].end = option.dataZoom[0].end + 10;
            myChart.setOption(option)
        })

        $('input').RangeSlider({
            min: 0, max: 12, step: 1, callback: function ($value) {
                var p = 100 / 24 * $value

                if (p != option.dataZoom[0].start) {
                    option.dataZoom[0].start = p;
                    option.dataZoom[0].end = p + 50;
                    myChart.setOption(option)
                }
            }
        });

        myChart.on('datazoom',function(result){
            var h = Math.round(result.batch[0].start * 23 / 100)
            var val = $('input').val();

            if(h != val){
                $('input').val(h);
            }

        })
    })

    $.fn.RangeSlider = function (cfg) {
        this.sliderCfg = {
            min: cfg && !isNaN(parseFloat(cfg.min)) ? Number(cfg.min) : null,
            max: cfg && !isNaN(parseFloat(cfg.max)) ? Number(cfg.max) : null,
            step: cfg && Number(cfg.step) ? cfg.step : 1,
            callback: cfg && cfg.callback ? cfg.callback : null
        };

        var $input = $(this);
        var min = this.sliderCfg.min;
        var max = this.sliderCfg.max;
        var step = this.sliderCfg.step;
        var callback = this.sliderCfg.callback;

        $input.attr('min', min)
            .attr('max', max)
            .attr('step', step);

        $input.bind("input", function (e) {
            $input.attr('value', this.value);

            if ($.isFunction(callback)) {
                callback(this.value);
            }
        });
    };
</script>


